<template>
	<!-- <view style="margin-bottom: 52px;">
		
	</view> -->
	<view class="orderListIndex">
		<u-tabs :list="tabsdata" lineWidth="20" lineHeight="7" @change="currentChange"
			:lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
		        color: '#303133',
		        fontWeight: 'bold',
		        transform: 'scale(1.05)'
		    }" :inactiveStyle="{
		        color: '#606266',
		        transform: 'scale(1)'
		    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
		</u-tabs>

		<view class="orderList">
			<scroll-view enable-back-to-top refresher-enabled
				@refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered" lower-threshold="20"  scroll-y class="scroll-view"
				@scrolltolower="getOrderDataByPage">
				<view v-for="item in orderList" class="orderItem">
					<view class="orderItem-inner" v-if="item.orderStatus==currentSubsection || currentSubsection==0"
						@click="to_order_details(item.id)">
						<view class="orderItem-top">
							<view class="orderItem-left">
								<view class="order-type">
									{{item.type}}
								</view>
								<p style="">“吾之老”社区共享食堂</p>
							</view>
							<view class="orderItem-right">
								<up-tag v-if="item.orderStatus==1" type="error" text="未支付" plain
									shape="circle"></up-tag>
								<up-tag v-else-if="item.orderStatus==2" text="支付成功" plain shape="circle"></up-tag>
								<up-tag v-else="item.orderStatus==3" type="info" text="已退款" plain
									shape="circle"></up-tag>
							</view>
						</view>
						<view class="orderItem-center">
							<view class="orderItem-left">
								<view class="sp-img">
									<up-image :show-loading="true" :src="item.spImg" width="128px"
										height="90px"></up-image>
								</view>
								<p class="sp-name">{{item.title}}</p>
							</view>
							<view class="orderItem-right">
								共{{item.number}}件
							</view>
						</view>
						<view class="orderItem-bottom">
							<view class="orderItem-left">
								下单时间：{{item.createTime}}
							</view>
							<view class="orderItem-right">
								合计：￥<text style="color: red;font-size: 36rpx;">{{item.prcSum}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		getUserOrderByStatusAPI
	} from '@/services/order'
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const lineBg =
		"";

	const to_order_details = (id) => {
		uni.navigateTo({
			url: "/subpkg/order/orderDetail/orderDetail?id=" + id
		})
	}

	// 顶部tabs数据  
	const tabsdata = reactive([{
			index: 0,
			name: '全部'
		},
		{
			index: 1,
			name: '未支付',
			badge: {
				isDot: false
			}
		},
		{
			index: 2,
			name: '支付成功'
		},
		{
			index: 3,
			name: '已退款'
		}
	]);
	const orderList = ref([])
	//tabs 当前选中的索引
	const currentSubsection = ref(0);
	//分页请求参数
	const queryParams = {
		page: 1,
		pageSize: 2,
		orderStatus: currentSubsection.value,
	}

	//tabs状态切换
	const currentChange = async (obj) => {
		currentSubsection.value = obj.index;
		// console.log("当前选中的索引", currentSubsection.value);
		// 重置数据
		queryParams.page = 1
		queryParams.orderStatus = currentSubsection.value
		orderList.value = []
		isFinish.value = false
		// 加载数据
		await getOrderDataByPage()

	}

	//下拉刷新------------------
	// 下拉刷新状态
	const isTriggered = ref(false)
	// 自定义下拉刷新被触发
	const onRefresherrefresh = async () => {
		// 开始动画
		isTriggered.value = true
		// 重置数据
		queryParams.page = 1
		orderList.value = []
		isFinish.value = false
		// 加载数据
		await getOrderDataByPage()
		// 关闭动画
		isTriggered.value = false
	}
	//下拉刷新----------------------

	//上拉加载----------------------
	// 是否加载中标记，用于防止滚动触底触发多次请求
	const isLoading = ref(false)
	// 是否分页结束
	const isFinish = ref(false)
	// 滚动触底时分页加载数据
	const getOrderDataByPage = async () => {
		// 如果数据出于加载中，退出函数
		if (isLoading.value) return
		// 退出分页判断
		if (isFinish.value === true) {
			return uni.showToast({
				icon: 'none',
				title: '没有更多数据~'
			})
		}
		// 发送请求前，标记为加载中
		isLoading.value = true
		// 发送请求
		const res = await getUserOrderByStatusAPI(queryParams)
		// 发送请求后，重置标记
		isLoading.value = false
		// 数组追加
		// console.log(3333333333, res.data.data)
		orderList.value.push(...res.data.data.orderList)
		// 分页条件
		if (queryParams.page < res.data.data.totalPages) {
			// 页码累加
			queryParams.page++
		} else {
			// 分页已结束
			isFinish.value = true
		}
	}
	//上拉加载----------------------


	//生命周期
	onLoad(async () => {
		getOrderDataByPage()
	})
</script>
<style lang="scss">
	page{
	  height: 100%;
	  overflow: hidden;
	}
</style>
<style lang="scss" scoped>
	
	.orderListIndex {
		width: 100%;
		margin: 0 auto;
		height: 100%;
		background-color: white;
	}

	:deep(.u-tabs) {
		position: fixed;
		top: 0;
		z-index: 99999;
		background-color: white;
		    width: 100%;
	}

	.orderList {
		height: 100%;
		width: 95%;
		margin: 0 auto;
		margin-top: 70rpx;
		background-color: white;
		
		:deep(scroll-view){
			height: 100%;
		}
	}

	.orderItem{
		// &:last-child {
		// 	padding-bottom: 40rpx;
		// }
	}
	.orderItem-inner {
		width: 100%;
		margin-top: 12px;
		background-color: #F2F2F2;
		padding-top: 12px;
		padding-bottom: 1rpx;

		
	}

	.orderItem-top,
	.orderItem-center,
	.orderItem-bottom {
		display: flex;
		align-items: center;
		margin-bottom: 12px;
	}

	.orderItem-left {
		flex: 1;
		display: flex;
		align-items: center;
		margin-left: 9px;
	}

	.orderItem-right {
		margin-right: 9px;
	}

	.orderItem-top p {
		font-size: 14px;
	}

	.orderItem-top>.orderItem-right>p {
		color: #D9001B;
	}

	.sp-name {
		margin-left: 12px;
	}

	.orderItem-center>.orderItem-right {
		font-size: 14px;
	}

	.orderItem-bottom {
		font-size: 13px;
	}

	.orderItem-left>.sp-img {
		width: 128px;
		height: 90px;
		border-radius: 10px;
		overflow: auto;
		background-color: antiquewhite;
	}

	.order-type {
		padding: 2rpx 18rpx 2rpx;
		font-size: 8px;
		color: #D9001B;
		border: 1px solid #D9001B;
		border-radius: 5px;
		/* margin-right: 23px; */
	}
</style>